<template>
    <div class="container">
        <Header />
        <BackBtn />
        <div class="content">
            <div class="title">招聘职位信息</div>
            <div class="form">
                <van-form>
                    <van-field
                        v-model="postData.jobtitle"
                        required
                        name="jobtitle"
                        label="职位名称"
                        placeholder="请输入职位名称"
                        :rules="[{ required: true, message: '请填写职位名称' }]"
                    />
                    <van-field
                        v-model="fieldValue"
                        is-link
                        readonly
                        label="地区"
                        placeholder="请选择所在地区"
                        @click="show = true"
                    />
                    <van-popup v-model:show="show" round position="bottom">
                        <van-cascader
                            v-model="cascaderValue"
                            title="请选择所在地区"
                            :options="options"
                            @close="show = false"
                            @finish="onFinish"
                        />
                    </van-popup>
                    <van-field
                        v-model="postData.describe"
                        rows="8"
                        autosize
                        required
                        label="职位描述"
                        type="textarea"
                        maxlength="500"
                        placeholder="请输入职位描述"
                        show-word-limit
                        :rules="[{ required: true, message: '请填写职位描述' }]"
                    />
                    <!-- <van-field
                        v-model="postData.jobTrade"
                        required
                        name="jobTrade"
                        label="职位行业"
                        placeholder="请输入职位行业"
                        :rules="[{ required: true, message: '请填写职位行业' }]"
                    />
                    <van-field
                        v-model="postData.type"
                        required
                        name="type"
                        label="职位类型"
                        placeholder="请输入职位类型"
                        :rules="[{ required: true, message: '请填写职位类型' }]"
                    /> -->
                    <van-field
                        v-model="postData.exper"
                        required
                        name="exper"
                        label="经验要求"
                        placeholder="请输入经验要求"
                        :rules="[{ required: true, message: '请填写经验要求' }]"
                    />
                    <van-field
                        v-model="postData.diploma"
                        required
                        name="diploma"
                        label="最低学历"
                        placeholder="请输入最低学历"
                        :rules="[{ required: true, message: '请填写最低学历' }]"
                    />
                    <van-field
                        v-model="postData.salary"
                        required
                        name="salary"
                        label="薪资范围"
                        placeholder="请输入薪资范围"
                        :rules="[{ required: true, message: '请填写薪资范围' }]"
                    />
                    <van-field
                        v-model="postData.jobDist"
                        required
                        name="jobDist"
                        label="区域"
                        placeholder="(龙华区/秀英区/美兰区/琼山区)"
                        :rules="[{ required: true, message: '请填写区域' }]"
                    />
                    <van-field
                        v-model="postData.place"
                        required
                        name="place"
                        label="工作地点"
                        placeholder="请输入工作地点"
                        :rules="[{ required: true, message: '请填写工作地点' }]"
                    />
                </van-form>
            </div>
            <div style="padding: 16px 10px">
                <van-button round block type="primary" @click="submit">
                    保存并发布
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header.vue";
import BackBtn from "@/components/BackBtn";
import axios from "@/api/axios.js";
import qs, { stringify } from "qs";
import { Toast } from "vant";
export default {
    components: {
        Header,
        BackBtn,
    },
    data() {
        return {
            postData: {
                jobtitle: "",
                describe: "",
                type: "",
                jobTrade: "",
                exper: "",
                diploma: "",
                salary: "",
                jobDist: "",
                place: "",
            },
            show: false,
            fieldValue: "",
            cascaderValue: "",
            options: [
                {
                    text: "浙江省",
                    value: "330000",
                    children: [{ text: "杭州市", value: "330100" }],
                },
                {
                    text: "江苏省",
                    value: "320000",
                    children: [{ text: "南京市", value: "320100" }],
                },
            ],
        };
    },
    methods: {
        onFinish({ selectedOptions }) {
            show.value = false;
            fieldValue.value = selectedOptions
                .map((option) => option.text)
                .join("/");
        },
        submit() {
            let data = {};
            if (this.$route.params.uuid) {
                data = {
                    uuid: this.postData.uuid,
                    jobName: this.postData.jobtitle,
                    jobInfo: this.postData.describe,
                    jobTrade: this.postData.jobTrade,
                    jobType: this.postData.type,
                    jobExp: this.postData.exper,
                    jobEdu: this.postData.diploma,
                    salary: this.postData.salary,
                    jobDist: this.postData.jobDist,
                    jobAddr: this.postData.place,
                };
            } else {
                data = {
                    jobName: this.postData.jobtitle,
                    jobInfo: this.postData.describe,
                    jobTrade: this.postData.jobTrade,
                    jobType: this.postData.type,
                    jobExp: this.postData.exper,
                    jobEdu: this.postData.diploma,
                    salary: this.postData.salary,
                    jobDist: this.postData.jobDist,
                    jobAddr: this.postData.place,
                };
            }
            axios.post("/hkrc/unit/saveJob", qs.stringify(data)).then((res) => {
                console.log(res);
                if (res.success) {
                    Toast.success("保存成功");
                } else if (res.msg == "企业未登录或营业执照未审核通过") {
                    Toast.fail("企业未登录或营业执照未审核通过");
                    setTimeout(() => {
                        window.localStorage.removeItem("COOKIE");
                        this.$router.push({
                            name: "CompanyCertification",
                            params: { back: 1 },
                        });
                    }, 2000);
                } else {
                    Toast.fail("出错了");
                }
            });
        },
    },
    created() {
        if (this.$route.params.unitData) {
            let data = JSON.parse(this.$route.params.unitData);
            this.postData = {
                uuid: data.uuid,
                jobtitle: data.jobName,
                describe: data.jobInfo,
                type: data.jobType,
                jobTrade: data.jobTrade,
                exper: data.jobExp,
                diploma: data.jobEdu,
                salary: data.salary,
                jobDist: data.jobDist,
                place: data.jobAddr,
            };
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: auto;
    background: #f5f6f8;
    .content {
        padding: 0 18.5px;
        .title {
            padding-top: 15px;
            font-size: 15px;
            font-weight: bold;
            color: #000000;
        }
        .form {
            margin-top: 10px;
            background: #fff;
            padding: 5px;
        }
    }
}
</style>